import BaseChart from '@/components/echarts/BaseChart';
import { fontSizeRem } from '@/utils/fontSizeRem';
import type { EChartsOption } from 'echarts';
import 'echarts-liquidfill';

interface Props {
  reviews: number[]; // 明确元组类型
}

const Reviews = ({ reviews: [positive, negative] }: Props) => {
  // 数据校验与转换
  const safeData = [
    {
      value: positive,
      name: '好评数'
    },
    {
      value: negative,
      name: '差评数'
    },
  ];

  // 总评论数
  const total = safeData.reduce((sum, item) => sum + item.value, 0);

  const options: EChartsOption = {
    title: {
      text: ((positive / total) * 100).toFixed(1) + '%',
      left: 'center',
      top: 'center',
      textStyle: {
        fontSize: fontSizeRem(12),
        color: '#fff'
      }
    },
    tooltip: {
      trigger: 'item',
      extraCssText: `
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        border-radius: 4px;
        background: rgba(255,255,255,0.95);
        padding: 8px 12px;
      `,
      formatter: (params: any) => {
        if (params.seriesType !== 'pie') return ''; // 过滤非饼图系列
        if (!params.data || total === 0) return '暂无数据';

        const currentData = params.data;
        const colorMap = {
          '好评数': '#67C23A',
          '差评数': '#F56C6C'
        };

        return `
          <div style="color: #333; font-size: 14px; min-width: 110px;">
            <div style="
              font-weight: 600; 
              border-bottom: 1px solid #eee;
              padding-bottom: 3px;
              margin-bottom: 3px;
            ">
              ${currentData.name}
            </div>
            <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
              <span style="display: flex; align-items: center;">
                <span style="
                  display: inline-block;
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background: ${colorMap[currentData.name as keyof typeof colorMap]};
                  margin-right: 8px;
                "></span>
                数量
              </span>
              <strong>${currentData.value} 条</strong>
            </div>
            <div style="display: flex; justify-content: space-between;">
              <span>占比</span>
              <strong>${((currentData.value / total) * 100).toFixed(1)}%</strong>
            </div>
          </div>
        `;
      }
    },
    series: [
      {
        type: 'liquidFill',
        radius: '65%',
        center: ['50%', '50%'],
        data: [0.65, 0.55, 0.45],
        amplitude: 20,
        backgroundStyle: {
          color: 'rgba(64, 121, 255, 0.55), 0.57)',
          borderWidth: 2,
        },
        label: { show: false },
        outline: { show: false }
      },
      {
        type: 'pie',
        radius: ['65%', '80%'],
        center: ['50%', '50%'],
        color: ['#67C23A', '#F56C6C'],
        label: { show: false },
        labelLine: { show: false },
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff'
        },
        data: safeData
      }
    ],
  } as EChartsOption

  return (
    <>
      <h4>好评率</h4>
      <div style={{ width: '100%', height: '13vh' }}>
        <BaseChart option={options} />
      </div>
    </>
  );
};

export default Reviews;